<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Plugins -->
    <link rel="stylesheet" href="../assets/vendor/animate/animate.min.css" type="text/css">
    <!-- Theme CSS -->
    <link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link rel="stylesheet" href="../assets/vendor/jquery-scrollbar/css/jquery-scrollbar.css">
    <link type="text/css" href="../assets/vendor/highlight/css/highlight.min.css" rel="stylesheet">
    <link type="text/css" href="../assets/css/demo.css" rel="stylesheet">
  </head>
  <body>
    <main class="main">
      <aside class="sidebar" id="nav_docs">
        <div class="sidebar-brand">
          <h1 class="font-weight-400"><a href="../"><span class="font-weight-700">Boomerang</span> UI Kit</a></h1>
        </div>
        <div class="scrollbar-inner">
          <ul class="navigation pr-3">
            <li class="navigation-title">Getting started</li>
            <li class="navigation-item">
              <a href="introduction.html" class="navigation-link">Introduction</a>
            </li>
            <li class="navigation-item">
              <a href="file-structure.html" class="navigation-link">File structure</a>
            </li>
            <li class="navigation-item">
              <a href="plugins.html" class="navigation-link">Plugins</a>
            </li>
            <li class="navigation-item">
              <a href="customization.html" class="navigation-link">Customization</a>
            </li>
            <li class="navigation-item">
              <a href="update.html" class="navigation-link">Update</a>
            </li>
            <li class="navigation-title">Design elements</li>
            <li class="navigation-item">
              <a href="colors.html" class="navigation-link">Colors</a>
            </li>
            <li class="navigation-item">
              <a href="typography.html" class="navigation-link">Typography</a>
            </li>
            <li class="navigation-item">
              <a href="icons.html" class="navigation-link">Icons</a>
            </li>
            <li class="navigation-title">Components</li>
            <li class="navigation-item">
              <a href="alerts.html" class="navigation-link">Alerts</a>
            </li>
            <li class="navigation-item">
              <a href="avatars.html" class="navigation-link">Avatars</a>
            </li>
            <li class="navigation-item">
              <a href="badges.html" class="navigation-link">Badges</a>
            </li>
            <li class="navigation-item">
              <a href="buttons.html" class="navigation-link">Buttons</a>
            </li>
            <li class="navigation-item">
              <a href="cards.html" class="navigation-link">Cards</a>
            </li>
            <li class="navigation-item">
              <a href="dropdowns.html" class="navigation-link">Dropdowns</a>
            </li>
            <li class="navigation-item">
              <a href="forms.html" class="navigation-link">Forms</a>
            </li>
            <li class="navigation-item">
              <a href="modal.html" class="navigation-link">Modal</a>
            </li>
            <li class="navigation-item">
              <a href="navbar.html" class="navigation-link">Navbar</a>
            </li>
            <li class="navigation-item">
              <a href="navs.html" class="navigation-link">Navs</a>
            </li>
            <li class="navigation-item">
              <a href="pagination.html" class="navigation-link">Pagination</a>
            </li>
            <li class="navigation-item">
              <a href="progress.html" class="navigation-link">Progress</a>
            </li>
            <li class="navigation-item">
              <a href="tables.html" class="navigation-link">Tables</a>
            </li>
            <li class="navigation-item">
              <a href="tooltips.html" class="navigation-link">Tooltips</a>
            </li>
          </ul>
        </div>
      </aside>
      <section class="content">
        <div class="header">
          <div class="navigation-trigger d-xl-none" data-action="aside-open" data-target=".sidebar">
            <div class="navigation-trigger-inner">
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
            </div>
          </div>
          <div class="header-brand d-xl-none">
            <h1><a href="index.html">Boomerang UI Kit</a></h1>
          </div>
          <div class="header-nav ml-auto">
            <ul class="nav align-items-center">
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link pl-0 active" href="../">Go to UI Kit</a>
              </li>
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link" href="../docs/changelog.html">Changelog</a>
              </li>
              <li class="nav-item ml-4">
                <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" class="btn btn-sm btn-primary">Download Free</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-inner content-docs">
          <div class="container">
            <div class="pt-3 pb-4 mb-4 border-bottom">
              <div class="row">
                <div class="col-lg-6">
                  <h2 class="heading h2 font-weight-bold">Typography</h2>
                  <p>Documentation and examples for typography, including global settings, headings, body text, lists, and more.</p>
                  <a href="http://getbootstrap.com/docs/4.0/content/typography" target="_blank">Open Bootstrap Docs</a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-9">
                <h3 id="typeface">Typeface</h3>
                <p>For this theme we used <a href="https://fonts.google.com/specimen/Nunito" target="_blank" class="font-weight-600">Nunito</a> font family from Google Fonts. It is free for commercial use. However, you can choose any font family and include it instead of the default one.</p>
                <p>To learn more about how to edit fonts, colors and other SCSS variables <a href="../docs/customization.html">click here</a></p>
                <div class="row typeface-palette cols-xs-space cols-sm-space cols-md-space mt-5">
                  <div class="col-sm-4">
                    <a>
                      <div class="typeface-entry">
                        <span class="badge badge-md typeface-badge badge-pill bg-primary text-white">Regular</span>
                        <h5 class="heading display-3 font-weight-400 text-dark">
                          Aa
                        </h5>
                        <p>
                          Mist enveloped the ship three hours out from port.
                        </p>
                      </div>
                    </a>
                  </div>
                  <div class="col-sm-4">
                    <a>
                      <div class="typeface-entry">
                        <span class="badge badge-md typeface-badge badge-pill bg-primary text-white">Semi-bold</span>
                        <h5 class="heading display-3 font-weight-600 text-dark">
                          Aa
                        </h5>
                        <p>
                          A shining crescent far beneath the flying.
                        </p>
                      </div>
                    </a>
                  </div>
                  <div class="col-sm-4">
                    <a data-value="'Quicksand', sans-serif">
                      <div class="typeface-entry">
                        <span class="badge badge-md typeface-badge badge-pill bg-primary text-white">Bold</span>
                        <h5 class="heading display-3 font-weight-700 text-dark">
                          Aa
                        </h5>
                        <p>
                          A shining crescent far beneath the flying.
                        </p>
                      </div>
                    </a>
                  </div>
                </div>
                <h3 id="headings">Headings</h3>
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>Heading</th>
                      <th>Example</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <p><code class="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
                      </td>
                      <td><span class="h1">h1. Bootstrap heading</span></td>
                    </tr>
                    <tr>
                      <td>
                        <p><code class="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
                      </td>
                      <td><span class="h2">h2. Bootstrap heading</span></td>
                    </tr>
                    <tr>
                      <td>
                        <p><code class="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
                      </td>
                      <td><span class="h3">h3. Bootstrap heading</span></td>
                    </tr>
                    <tr>
                      <td>
                        <p><code class="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
                      </td>
                      <td><span class="h4">h4. Bootstrap heading</span></td>
                    </tr>
                    <tr>
                      <td>
                        <p><code class="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
                      </td>
                      <td><span class="h5">h5. Bootstrap heading</span></td>
                    </tr>
                    <tr>
                      <td>
                        <p><code class="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
                      </td>
                      <td><span class="h6">h6. Bootstrap heading</span></td>
                    </tr>
                  </tbody>
                </table>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html">
<span class="nt">&lt;h1&gt;</span>h1. Boomerang heading<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h2&gt;</span>h2. Boomerang heading<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;h3&gt;</span>h3. Boomerang heading<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;h4&gt;</span>h4. Boomerang heading<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;h5&gt;</span>h5. Boomerang heading<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;h6&gt;</span>h6. Boomerang heading<span class="nt">&lt;/h6&gt;</span>
</code></pre>
                </div>
                <div class="card bg-secondary">
                  <div class="card-body">
                    <h6 class="title-decorative">Additional Class Reference</h6>
                    <dl class="row justfiy-content-between">
                      <dt class="col-4"><code>.h1 to .h6</code>
                      </dt>
                      <dd class="col-8">Apply to heading tags for when you want to match the font styling of a heading but cannot use the associated HTML element</dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 d-none d-lg-inline-block">
                <div class="sidebar-sticky" data-stick-in-parent="true">
                  <ul class="section-nav">
                    <li class="toc-entry toc-h3"><a href="#typeface">Typeface</a></li>
                    <li class="toc-entry toc-h3"><a href="#headings">Headings</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="px-3 footer bg-white">
          <div class="container ">
            <div class="row align-items-center py-3 border-top">
              <div class="col-lg-6 text-center text-lg-left mb-2 mb-lg-0">
                &copy; 2018 <a href="https://webpixels.io/" target="_blank">Webpixels</a>. All rights reserved.
              </div>
              <div class="col-lg-6 text-center text-lg-right">
                <ul class="nav justify-content-center justify-content-lg-end">
                  <li class="nav-item">
                    <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </section>
    </main>
    <!-- Core -->
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/popper/popper.min.js"></script>
    <script src="../assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Scripts used only for this demo only - Remove these in your project -->
    <script src="../assets/vendor/jquery-scrollbar/js/jquery-scrollbar.min.js"></script>
    <script src="../assets/vendor/jquery-scrollLock/jquery-scrollLock.min.js"></script>
    <script src="../assets/vendor/sticky-kit/sticky-kit.min.js"></script>
    <script src="../assets/vendor/highlight/js/highlight.min.js"></script>
    <script src="../assets/vendor/clipboard-js/clipboard.min.js"></script>
    <script src="../assets/vendor/holderjs/holder.min.js"></script>
    <script src="../assets/js/demo.js"></script>
    <!-- Theme JS -->
    <script src="../assets/js/theme.js"></script>
  </body>
</html>